<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="icon" href="https://static.nowcoder.com/images/logo_87_87.png"/>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
	<link rel="stylesheet" href="../module/css/global.css" />
	<link rel="stylesheet" href="../module/css/login.css" />
	<title>线上校园答疑平台-注册</title>
</head>
<body>
	<div class="nk-container">
		<!-- 头部 -->
		<header class="bg-dark sticky-top" th:replace="index::header">
			<div class="container">
				<!-- 导航 -->
				<nav class="navbar navbar-expand-lg navbar-dark" id="nav">
				</nav>
			</div>
		</header>

		<!-- 内容 -->
		<div class="main">
			<div class="container pl-5 pr-5 pt-3 pb-3 mt-3 mb-3">
				<h3 class="text-center text-info border-bottom pb-3">注&nbsp;&nbsp;册</h3>
<!--				<form class="mt-5" method="post" th:action="@{/register}">-->
					<div class="form-group row">
						<label for="username" class="col-sm-2 col-form-label text-right">账号:</label>
						<div class="col-sm-10">
							<input type="text" class="form-control"
								   id="username" name="username" placeholder="请输入您的账号!" required>
						</div>
					</div>
					<div class="form-group row mt-4">
						<label for="password" class="col-sm-2 col-form-label text-right">密码:</label>
						<div class="col-sm-10">
							<input type="password" class="form-control"
								   id="password" name="password" placeholder="请输入您的密码!" required>
						</div>
					</div>
					<div class="form-group row mt-4">
						<label for="re-password" class="col-sm-2 col-form-label text-right">确认密码:</label>
						<div class="col-sm-10">
							<input type="password" class="form-control"
								   id="re-password" placeholder="请再次输入密码!" required>
						</div>
					</div>
					<div class="form-group row">
						<label for="phone" class="col-sm-2 col-form-label text-right">电话:</label>
						<div class="col-sm-10">
							<input type="email" class="form-control"
								   id="phone" name="phone" placeholder="请输入您的电话!" required>
						</div>
					</div>
					<div class="form-group row">
						<label for="email" class="col-sm-2 col-form-label text-right">邮箱:</label>
						<div class="col-sm-10">
							<input type="email" class="form-control"
								   id="email" name="email" placeholder="请输入您的邮箱!" required>
						</div>
					</div>
					<div class="form-group row mt-4">
						<div class="col-sm-2"></div>
						<div class="col-sm-10 text-center">
							<button class="btn btn-info text-white form-control" onclick="frontRegister()">立即注册</button>
						</div>
					</div>
<!--				</form>				-->
			</div>
		</div>

		<!-- 尾部 -->
		<footer class="bg-dark">
			<div class="container" id="footer">

			</div>
		</footer>
	</div>

	<script src="../module/js/jquery-3.3.1.js"></script>
	<script src="../module/js/popper.min.js"></script>
	<script src="../module/js/bootstrap.min.js"></script>
	<script src="../module/js/global.js"></script>
	<script src="../module/layui/layui.js"></script>
	<script src="../module/js/header.js"></script>
<!--	<script src="../module/js/config.js"></script>-->
</body>
</html>

<script>
	function frontRegister() {
		let password = $("#password").val();
		let repassword = $("#re-password").val();
		let params = {};
		params.username = $("#username").val();
		params.password = password;
		params.phone = $("#phone").val();
		params.email = $("#email").val();
		if ($("#username").val() == '') {
			mesg('请输入您的账号');
			return false;
		} else if(password==''){
			mesg('请输入您的密码');
			return false;
		}else if(repassword==''){
			mesg('请再次输入密码');
			return false;
		}else if($("#phone").val()==''){
			mesg('请输入您的电话');
			return false;
		}else if($("#email").val()==''){
			mesg('请输入您的邮箱');
			return false;
		}else if(!judge()){
			mesg('电话号码格式不正确');
			return false;
		}else if(password!=repassword){
			mesg('两次密码不一致');
			return false;
		} else if(password===repassword) {
			let result = sendPost("api-user/user/register",params);
			console.log(result);
			if(result.code==0){
				layui.use('layer', function(){
					layer.open({
						title: '提示'
						,offset: '250px'
						,content: '注册成功'
						,yes: function(){
							window.location.href = "login.html"
						}
					});
				});
			} else if (result.code==1){
				mesg(result.msg);
			}
		}
	}
	function judge() {
		let regPhone = /^1[3|4|5|7|8][0-9]{9}$/;
		let value = document.getElementById("phone").value;
		if (!regPhone.test(value)) {
			return false;
		}
		return true;
	}
</script>
